<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="lib/vue.js"></script>
		<script src="https://unpkg.com/tween.js@16.3.4"></script>
	</head>
	<body>
		<div id="animated-number-demo">
			<input type="number" v-model.number="number" step="20"/>
			<p>{{ animatedNumber }}</p>
		</div>
	</body>
	<script>
		new Vue({
			el:'#animated-number-demo',
			data:{
				number:0,
				animatedNumber:0
			},
			watch:{
				number : function(newValue,oldValue){
					var vm=this
					function animate(time){
						requestAnimationFrame(animate)
						TWEEN.update(time)
					}
					new TWEEN.Tween({tweeningNumber:oldValue})
					.easing(TWEEN.Easing.Quadratic.Out)
					.to({tweeningNumber:newValue},500)
					.onUpdate(function(){
						vm.animatedNumber=this.tweeningNumber.toFixed(0)
					})
					.start()
					animate()
				}
			}
		});
	</script>
</html>
